<template>
  <n-layout style="height: 100vh" :native-scrollbar="false">
    <n-layout-header bordered class="item-center header-nav" >
      <n-grid x-gap="12" :cols="16" class="nav-height">
        <n-gi span="3">
          <div class="item-center nav-height hover-pointer">
            <n-icon :component="LogoIcon" size="27"/>巡航先锋
          </div>
        </n-gi>
        <n-gi span="6" offset="4" class="item-center nav-height">
          <n-menu
            v-model:value="activeKey"
            mode="horizontal"
            :options="menuOptions"
            responsive
          />
        </n-gi>
        <n-gi span="3">
          <div class="item-center nav-height">
            <n-gradient-text v-if="!user" type="info" class="hover-pointer" @click="to('login')">
              <n-icon :component="LoginIcon" />登 录
            </n-gradient-text>
            <n-dropdown v-else
                        :options="dropdownOption"
                        trigger="click"
                        @select="handleSelect"
                        :show-arrow="true"
            >
              <n-text type="success" class="hover-pointer">{{user.nickName}} </n-text>
            </n-dropdown>
          </div>
        </n-gi>
      </n-grid>
    </n-layout-header>
    <n-layout-content :native-scrollbar="false">
      <slot />
    </n-layout-content>
    <n-layout-footer class="footer-gi">
      <n-grid :cols="4" x-gap="56" >
        <n-gi>
          <n-h2 prefix="bar"><strong>巡航先锋</strong></n-h2>
          <n-text>
            离线3D点云自主规划飞行航线，巡检任务自定设定，巡检频次大幅提升，图像识别技术和图像控制算法精确识别、锁定目标、云端自动分析、检测缺陷并出具报告
          </n-text>
        </n-gi>
        <n-gi>
          <n-h3><strong>产品介绍</strong></n-h3>
          <n-ul>
            <li>* 效率-提升八倍</li>
            <li>* 精细-提升两倍</li>
            <li>* 自由-任务设定</li>
            <li>* 自主-航线规划</li>
            <li>* 自动-分析检测</li>
            <li>* 减轻-劳动强度</li>
          </n-ul>
        </n-gi>
        <n-gi>
          <n-h3><strong>飞行系统</strong></n-h3>
          <n-ul>
            <li>智能无人机自动飞行系统</li>
            <li>智能故障排检算法</li>
            <li>自动报道检测生成</li>
            <li>双目定位</li>
          </n-ul>
        </n-gi>
        <n-gi>
          <n-h3 type="success"><strong>算法之章</strong></n-h3>
          <n-flex vertical>
            <n-tag type="info" >YOLO</n-tag>
            <n-qr-code
                value="https://www.naiveui.com/"
                color="#409eff"
                background-color="#F5F5F5"
            />
          </n-flex>
        </n-gi>
      </n-grid>
      <n-divider><n-text type="info">AI赋能 © 2023.巡航先锋</n-text></n-divider>
    </n-layout-footer>
    <n-back-top :right="100"/>
  </n-layout>
</template>

<script>
import {ref, inject, defineComponent, h} from "vue";
import {RouterLink} from "vue-router";
import {NIcon} from 'naive-ui'
import {AlbumsOutline as AlbumsIcon,
  BarChartOutline as BarChartIcon,
  LogoReddit as BulbIcon,
  ColorWandOutline as ColorWandIcon,
  SendOutline as LogoIcon,
  LogInOutline as LoginIcon,
  PersonCircleOutline as UserIcon,
  Pencil as EditIcon,
  LogOutOutline as LogoutIcon
} from '@vicons/ionicons5'
export default defineComponent({
  name: "visitor-communal",
  props: {
    active: {
      type: String
    }
  },
  data(){
    return{
      activeKey:this.active
    }
  },
  setup(){
    const {toPage} = inject("toPage")
    const user = JSON.parse(sessionStorage.getItem('user'))
    function renderIcon(icon) {
      return () => h(NIcon, null, { default: () => h(icon) });
    }
    //菜单数据设置
    const menuOptions = [
      {
        label: () => h(
           RouterLink,
            {
              to: {
                name: "visitor/home"
              }
            },
            { default: () => "项目简介"}
        ),
        key: "visitor-home",
        icon: renderIcon(AlbumsIcon)
      },
      {
        label: () => h(
            RouterLink,
            {
              to: {
                name: "visitor/procedure"
              }
            },
            { default: () => "逻辑简介"}
        ),
        key: "visitor-procedure",
        icon: renderIcon(ColorWandIcon)
      },
      {
        label: () => h(
            RouterLink,
            {
              to: {
                name: "visitor/modelTrial"
              }
            },
            { default: () => "模型先入"}
        ),
        key: "visitor-model-trial",
        icon: renderIcon(BulbIcon)
      },
      {
        label: () => h(
            RouterLink,
            {
              to: {
                name: "screen/home"
              }
            },
            { default: () => "数据统计"}
        ),
        key: "screen-home",
        icon: renderIcon(BarChartIcon)
      },
    ]
    //用户操作设置
    const dropdownOption = [
      {
        label: "用户资料",
        key: "profile",
        icon: renderIcon(UserIcon)
      },
      {
        label: "编辑用户资料",
        key: "editProfile",
        icon: renderIcon(EditIcon)
      },
      {
        label: "退出登录",
        key: "logout",
        icon: renderIcon(LogoutIcon)
      }
    ]
    function handleSelect(key) {
      if(key===dropdownOption[2].key){
        //退出登录
        sessionStorage.clear()   //清除所有session值
        localStorage.clear()     //清除所有localStorage值
        window.location.reload()
      }
    }
    return{
      LogoIcon,LoginIcon,
      to:toPage,
      user:ref(user),
      menuOptions:ref(menuOptions),
      dropdownOption:ref(dropdownOption),
      handleSelect
    }
  }
})
</script>

<style lang="scss" scoped>
$nav-height: 72px;
.header-nav{
  height: $nav-height;
  background: transparent;
}
.nav-height{
  height: $nav-height;
  background: transparent;
}
.footer-gi{
  padding:0 7%;
  padding-top: 1.2rem;
}
</style>